<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评论页</title>
		<style>
			/* 上半部分 */
			#comment{
				width: 900px;
				height: 100px;
				border: 1px solid #aa55ff;
			}
			#line{
				width: 880px;
				border: 1px solid #55ff00;
				/*盒子自适应居中*/
				margin: 0 auto;
				margin-top: 20px;
			}
			/*下半部分*/
			#pages{
				width: 900px;
				margin-top: 10px;
			}
			#pages a{/*加外边框，内边距*/
				border: 1px solid #ddd;
				padding: 4px 10px;
				border-radius: 5px;
				margin-right: 5px;
			}
			#pages a.current{
				border: 0;
				text-decoration: none;
				color: #000
			}
			/*抓到精灵图：3星--->推荐：显示元素  建议：背景图，微调*/
			div#comment i{
				display: block;/*行转块--设置宽高*/
				bord er: 1px solid red;
				width: 75px;
				height: 16px;
				paddi ng: 0px 37px;/*不能为负数*/
				background-image: url(img/e96080c08297e4755e89bdb90a8d215.jpg);
				background-position: -139px -237px;
				bor der-top: 2px solid red;
				margin: 10px 0px;
			}
		</style>
	</head>
	<body>
		<!-- 思路 html 结构 -->
		<div id="comment">
			<!-- 精灵图：将小图标导出成1张矢量图[png]好处：图片名称不用起，服务器压力小 -->
			<i></i>
			<div id="line"></div>
		</div>
		<div id="pages">
		<a href="#" class="current">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
		</div>
	</body>
</html>